package com.sy.musicapp.ui.login

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.Lock
import androidx.compose.material.icons.rounded.Person
import androidx.compose.material.icons.rounded.Visibility
import androidx.compose.material.icons.rounded.VisibilityOff
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.sy.musicapp.R
import com.sy.musicapp.ui.common.noRippleClickable
import com.sy.musicapp.ui.theme.Global
import com.sy.musicapp.ui.theme.MusicAppTheme
import com.sy.musicapp.ui.theme.tintText

/**
 * 登陆界面
 * @author SY
 * @since 2022-03-05 14:00
 **/
@Composable
fun LoginScreen(onSend: (String, String) -> Unit) {
    Box {
        Image(
            painter = painterResource(id = R.drawable.login_bg),
            contentDescription = null,
            contentScale = ContentScale.FillBounds,
            modifier = Modifier.fillMaxSize(1f)
        )
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(10.dp),
            modifier = Modifier
                .fillMaxSize(1f)
                .padding(20.dp, 40.dp)
                .padding(25.dp, 20.dp)
        ) {
            var str by remember {
                mutableStateOf("13476731259")
            }

            var pwd by remember {
                mutableStateOf("netease.sy0220.cloud")
            }
            var isVisibility: Boolean by remember {
                mutableStateOf(false)
            }
            var enabled by remember {
                mutableStateOf(true)
            }
            Image(
                painter = painterResource(id = R.drawable.keli),
                contentDescription = null,
                modifier = Modifier
                    .padding(bottom = 20.dp)
                    .size(150.dp)
            )
            Row(verticalAlignment = Alignment.CenterVertically) {
                BasicTextField(
                    modifier = Modifier
                        .weight(0.9f)
                        .clip(Global.shapes.large)
                        .background(Color.Black.copy(alpha = 0.1f))
                        .padding(15.dp),
                    value = str,
                    onValueChange = { str = it },
                    singleLine = true,
                    textStyle = tintText,
                    cursorBrush = SolidColor(Global.colors.onPrimary),
                    keyboardOptions = KeyboardOptions(
                        imeAction = ImeAction.Next,
                        keyboardType = KeyboardType.Number
                    ),
                    decorationBox = { innerTextField ->
                        Row(
                            horizontalArrangement = Arrangement.Start,
                            verticalAlignment = Alignment.CenterVertically
                        ) {
                            Icon(
                                imageVector = Icons.Rounded.Person,
                                contentDescription = "username",
                                tint = Color.Gray
                            )
                            innerTextField()
                        }
                    }
                )

            }

            Row(verticalAlignment = Alignment.CenterVertically) {
                BasicTextField(
                    modifier = Modifier
                        .weight(0.9f)
                        .clip(Global.shapes.large)
                        .background(Color.Black.copy(alpha = 0.1f))
                        .padding(15.dp),
                    value = pwd,
                    onValueChange = { pwd = it },
                    singleLine = true,
                    textStyle = TextStyle(color = Color.Gray, letterSpacing = 0.5.sp),
                    cursorBrush = SolidColor(Global.colors.onPrimary),
                    visualTransformation = if (isVisibility) VisualTransformation.None else PasswordVisualTransformation(),
                    keyboardOptions = KeyboardOptions(
                        imeAction = ImeAction.Send,
                        keyboardType = KeyboardType.Password
                    ),
                    keyboardActions = KeyboardActions(
                        onSend = {
                            onSend(str, pwd)
                        }
                    ),
                    decorationBox = { innerTextField ->
                        Row(
                            horizontalArrangement = Arrangement.SpaceAround,
                            verticalAlignment = Alignment.CenterVertically,
                            modifier = Modifier.fillMaxWidth(1f)
                        ) {
                            Icon(
                                imageVector = Icons.Rounded.Lock,
                                contentDescription = "pwd",
                                tint = Color.Gray,
                                modifier = Modifier.weight(0.1f)
                            )
                            Box(modifier = Modifier.weight(0.8f)) {
                                innerTextField()
                            }
                            Icon(
                                imageVector = if (isVisibility) {
                                    Icons.Rounded.Visibility
                                } else {
                                    Icons.Rounded.VisibilityOff
                                },
                                contentDescription = null,
                                tint = Color.Gray,
                                modifier = Modifier
                                    .padding(start = 2.dp)
                                    .weight(0.1f)
                                    .noRippleClickable {
                                        isVisibility = !isVisibility
                                    }
                            )
                        }
                    }
                )

            }

            TextButton(
                modifier = Modifier
                    .padding(top = 20.dp)
                    .fillMaxWidth(1f),
                shape = Global.shapes.large,
                enabled = str.isNotBlank() and pwd.isNotBlank(),
                contentPadding = PaddingValues(vertical = 15.dp),
                colors = ButtonDefaults.textButtonColors(backgroundColor = Global.colors.secondary),
                border = BorderStroke(1.dp, Color(0xFFCCCCCC)),
                onClick = {
                    enabled = false
                    onSend(str, pwd)
                }
            ) {
                Text(text = "登录")
            }

        }
    }
}

@Preview
@Composable
fun LoginPrev() {
    MusicAppTheme {
        Scaffold(
            backgroundColor = Global.colors.background,
            modifier = Modifier.fillMaxSize(1f),
        ) {
            LoginScreen(onSend = { _, _ -> })
        }
    }
}

@Preview
@Composable
fun LoginPrevDark() {
    MusicAppTheme {
        Scaffold(
            backgroundColor = Global.colors.background,
            modifier = Modifier.fillMaxSize(1f),
        ) {
            LoginScreen(onSend = { _, _ -> })
        }
    }
}